<template>
  <div id="app">
    <div v-if="!authenticated" class="login-page">
      <div class="login-box">
        <img src="./assets/logo.png" class="logo" alt="ESG Logo" />
        <h2>ESG 链上操作系统</h2>
        <el-input
          v-model="tokenInput"
          placeholder="请输入访问口令"
          type="password"
          @keyup.enter="verifyToken"
        />
        <el-button type="primary" @click="verifyToken" style="margin-top: 10px">登录</el-button>
      </div>
      <div class="animated-bg"></div>
    </div>

    <!-- 主页面 -->
    <transition name="slide-fade">
      <div v-if="authenticated" class="main-container">
        <h2 class="main-title">ESG 链上操作系统</h2>
        <el-tabs v-model="activeTab" @tab-click="handleTabClick" type="border-card">
          <el-tab-pane label="上链结果" name="results">
            <QueryPanel :start="start" :end="end" @query="fetchResults" />
            <ResultTable
              :data="results"
              :total="resultTotal"
              :page="resultPage"
              @pageChange="page => { resultPage = page; fetchResults(); }"
            />
          </el-tab-pane>

          <el-tab-pane label="调度记录" name="schedule">
            <QueryPanel :start="start" :end="end" @query="fetchSchedules" />
            <el-button type="danger" @click="triggerPush" style="margin-bottom: 10px">手动上链</el-button>
            <ScheduleTable :data="schedules" />
          </el-tab-pane>

          <el-tab-pane label="ESG指标数据" name="indicators">
            <IndicatorTable
              :data="indicators"
              :total="indicatorTotal"
              :page="indicatorPage"
              @pageChange="page => { indicatorPage = page; fetchIndicators(); }"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import QueryPanel from './components/QueryPanel.vue'
import ResultTable from './components/ResultTable.vue'
import ScheduleTable from './components/ScheduleTable.vue'
import IndicatorTable from './components/IndicatorTable.vue'

// ✅ 公共配置
const BASE_URL = 'http://119.45.166.189:9002'

const tokenInput = ref('')
const authenticated = ref(false)
const activeTab = ref('results')

const start = ref('')
const end = ref('')

const results = ref([])
const resultTotal = ref(0)
const resultPage = ref(1)

const schedules = ref([])

const indicators = ref([])
const indicatorTotal = ref(0)
const indicatorPage = ref(1)

const verifyToken = async () => {
  try {
    const res = await axios.post(`${BASE_URL}/api/token/verify`, {
      token: tokenInput.value
    })
    if (res.data.success) {
      authenticated.value = true
      fetchResults()
    }
  } catch (e) {
    alert('验证失败，请重新输入')
  }
}

const fetchResults = async () => {
  const res = await axios.get(`${BASE_URL}/api/onchain/results`, {
    params: { page: resultPage.value, size: 10, start: start.value, end: end.value }
  })
  results.value = res.data.data
  resultTotal.value = res.data.total
}

const fetchSchedules = async () => {
  const res = await axios.get(`${BASE_URL}/api/schedule/logs`, {
    params: { start: start.value, end: end.value }
  })
  schedules.value = res.data
}

const fetchIndicators = async () => {
  const res = await axios.get(`${BASE_URL}/api/indicators`, {
    params: { page: indicatorPage.value, size: 10 }
  })
  indicators.value = res.data.data
  indicatorTotal.value = res.data.total
}

const triggerPush = async () => {
  await axios.post(`${BASE_URL}/api/onchain`)
  fetchSchedules()
}

const handleTabClick = (tab) => {
  switch (tab.props.name) {
    case 'results':
      fetchResults()
      break
    case 'schedule':
      fetchSchedules()
      break
    case 'indicators':
      fetchIndicators()
      break
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.main-container {
  padding: 20px;
}

.main-title {
  margin-bottom: 20px;
  color: #333;
  font-size: 22px;
}

.login-page {
  position: relative;
  height: 100vh;
  background-color: #1a1a1a;
  overflow: hidden;
}

.login-box {
  position: absolute;
  z-index: 2;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.logo {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #2b5876, #4e4376);
  animation: pulse 6s ease-in-out infinite;
  z-index: 1;
}

@keyframes pulse {
  0% {
    background: radial-gradient(circle at center, #2b5876, #4e4376);
  }
  50% {
    background: radial-gradient(circle at center, #4e4376, #2b5876);
  }
  100% {
    background: radial-gradient(circle at center, #2b5876, #4e4376);
  }
}
</style>